<template>
	<view class="goods">
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper class="swiper-container" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in gallery" :key="index" class="swiper-item">
					<image :src="item.img_url" class="slide-image"></image>
				</swiper-item>
			</swiper>
			<button class="share" hover-class="none" open-type="share" value=''>分享商品</button>
		</view>
		<view class="swiper-b">
			<view class="item">30天无忧退货</view>
			<view class="item">30天无忧退货</view>
			<view class="item">30天无忧退货</view>
		</view>
		<view class="goods-info">
			<view class="c">
				<view>{{info.name}}</view>
				<view>{{info.goods_brief}}</view>
				<view>{{info.retail_price}}</view>
				<view class="brand" v-if="brand.name">
					<view>haha</view>
				</view>
			</view>
		</view>
		<view class="section-nav" @click="showTap">
			<view>请选择规格数量</view>
			<view></view>
		</view>
		<!-- 商品参数 -->
		<view class="attribute">
			<view class="head">
				商品参数
			</view>
			<view class="item" v-for="(item,index) in attribute" :key="index">
				<view>{{item.name}}</view>
				<view>{{item.value}}</view>
			</view>
		</view>
		<!-- 图片展示 -->
		<view class="detail" v-if="goods_desc">
			<mp-html :content="goods_desc" />
			<!-- <rich-text @click="test(goods_desc)" :nodes="goods_desc"></rich-text> -->
			<!-- <view id="test" v-html="goods_desc" :src="goods_desc" @tap="_previewImage(goods_desc)">{{goods_desc}}</view> -->
		</view>
		<!-- 常见问题 -->
		<view class="common-problem">
			<view class="h">
				<view class="title">常见问题</view>
			</view>
			<view class="b">
				<view class="item" v-for="(item,index) in issueList" :key="index">
					<view class="question-box">
						<view class="spot"></view>
						<view class="question">{{item.question}}</view>
					</view>
					<view class="answer">{{item.answer}}</view>
				</view>
			</view>
		</view>
		<!-- 大家都在看 -->
		<view class="common-problem">
			<view class="h">
				<view class="title">大家都在看</view>
			</view>
			<view class="sublist">
				<view v-for="(item,index) in productList" :key="index">
					<image :src="item.list_pic_url" mode=""></image>
					<view>{{item.name}}</view>
					<view>￥{{item.retail_price}}</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<view class="bottom-fixed">
			<view class="collect-box" @click="collect">
				<view class="collect" :class="[collectFlag ? 'active' : '']"></view>
			</view>
			<view class="car-box">
				<view class="car" @click="toCart">
					<view class="icon">{{allnumber}}</view>
					<image src="../../static/images/ic_menu_shoping_nor.png" mode=""></image>
				</view>	
			</view>
			<view @click="buy">立即购买</view>
			<view @click="addCart">加入购物车</view>
		</view>
		<!-- 选择规格的弹出层 -->
		<view class="pop" v-show="showpop" @click="showTap"></view>
		<view class="attr-pop" :class="[showpop ? 'fadeup' : 'fadedown']">
			<view class="top">
				<view class="left">
					<image :src="info.primary_pic_url"></image>
				</view>
				<view class="right">
					<view>
						<view>{{info.retail_price}}</view>
						<view>请选择规格数量</view>
					</view>
				</view>
				<view class="close" @click="showTap">
					✖
				</view>
			</view>
			<view class="b">
				<view>数量</view>
				<view class="count">
					<view class="cut" @click="reduce">-</view>
					<input type="text" v-model="number" class="number" disabled="false"/>
					<view class="add" @click="add">+</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mpHtml from '../../mp-html/mp-html.vue'
	export default {
		data() {
			return {
				id:'',
				openId:'',
				gallery:[],
				goodsId:'',
				info:{},
				brand:{},
				showpop:false,
				number:0,
				attribute:[],
				goods_desc:[],
				issueList:[],
				productList:[],
				collectFlag:false,
				allnumber:0,
				allPrice:''
			}
		},
		components:{
			mpHtml
		},
		//商品分享
		onShareAppMessage:function() {
			return {
				title:this.info.goods_brief,
				path:'/pages/goods/goods?id=' + this.info.id,
				imageUrl:this.gallery[0].img_url
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		mounted(){
			this.openId = uni.getStorageSync('openId') || '';
			this.goodsDetail()
		},
		methods: {
			//详情页数据请求
			async goodsDetail(){
				const data = await this.$request({
					url:'/goods/detailaction',
					data:{
						id:this.id,
						openId:this.openId
					}
				})
				console.log(data)
				this.info = data.data.info[0]
				this.gallery = data.data.gallery
				this.attribute = data.data.attribute
				this.goods_desc = data.data.info[0].goods_desc
				this.issueList = data.data.issue
				this.productList = data.data.productList
				this.goodsId = data.data.info[0].id
				this.collectFlag = data.data.collected
				this.allnumber = data.data.allnumber
				this.allPrice = data.data.info[0].retail_price
			},
			//点击弹出选择框
			showTap(){
				this.showpop = !this.showpop
			},
			//购物车+
			add(){
				this.number ++
			},
			//购物车-
			reduce(){
				if(this.number > 1){
					this.number --
				}else{
					return false
				}
			},
			//跳转购物车
			toCart(){
				uni.switchTab({
					url:'/pages/shopcar/shopcar'
				})
			},
			async buy(){
				if(this.showpop){
					if(this.number === 0){
						uni.showToast({
							title:"请选择商品数量",
							duration:1000,
							icon:'none',
							mask:true,
							success: (res) => {
								
							}
						})
						return false
					}
					const data = await this.$request({
						url:'/order/submitAction',
						method:"POST",
						data:{
							goodsId:this.goodsId,
							openId:this.openId,
							allPrice:this.allPrice
						}
					})
					console.log(data)
					if(data){
						uni.navigateTo({
							url:'/pages/order/order'
						})
					}
				}else{
					this.showpop = true
				}
			},
			async addCart(){
				if(this.showpop){
					if(this.number === 0){
						uni.showToast({
							title:"请选择商品数量",
							duration:1000,
							icon:'none',
							mask:true,
							success: (res) => {}
						})
						return false
					}
					const data  = await this.$request({
						url:'/cart/addCart',
						method:'POST',
						data:{
							openId:this.openId,
							goodsId:this.goodsId,
							number:this.number
						}
					})
					console.log(data)
					if(data){
						this.allnumber = this.allnumber + this.number
						uni.showToast({
							title:'添加购物车成功',
							icon:'success',
							duration:1000
						})
					}
				}else{
					this.showpop = true
				}
			},
			//收藏按钮
			async collect(){
				this.collectFlag = !this.collectFlag
				const data = await this.$request({
					url:'/collect/addcollect',
					method:'POST',
					data:{
						openId:this.openId,
						goodsId:this.goodsId
					}
				})
				console.log(data)
			}
		}
	}
</script>

<style lang="scss">
.goods{
	overflow: hidden;
	.swiper{
		width: 750rpx;
		height: 750rpx;
		position: relative;
		&-container{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.share{
			position: absolute;
			border-radius: 40rpx 0 0 40rpx;
			width: 150rpx;
			height: 65rpx;
			line-height: 65rpx;
			text-align: center;
			right: 0;
			top: 50rpx;
			background: #e0a354;
			color: #fff;
			font-size: 24rpx;
		}
	}
	.swiper-b{
		width: 100%;
		height: 73rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #f4f4f4;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view{
			background: url('http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png') 0 center no-repeat;
			background-size: 10rpx;
			padding-left: 15rpx;
			display: flex;
			align-items: center;
			font-size: 25rpx;
			color: #666;
		}
	}
	.goods-info{
		width: 750rpx;
		height: 306rpx;
		background: #fff;
		margin: 0 auto;
		border-bottom: 1rpx solid #f4f4f4;
		.c{
			height: 100%;
			view{
				
				text-align: center;
			}
			view:nth-child(1){
				font-size: 41rpx;
				padding: 20rpx;
			}
			view:nth-child(2){
				font-size: 24rpx;
				margin-bottom: 25rpx;
				color: #999;
			}
			view:nth-child(3){
				font-size: 35rpx;
				margin-bottom: 10rpx;
				color: #b4282d;
			}
			.brand{
				margin-top: 25rpx;
				text-align: center;
				view{
					color: #b1a279;
					font-size: 20rpx;
					padding: 5rpx 30rpx;
					border: 1rpx solid #b1a279;
				}
			}
		}
	}
	.section-nav{
		height: 108rpx;
		background: #fff;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		view:nth-child(2){
			width: 52rpx;
			height: 52rpx;
			background: url('../../static/images/address_right.png') no-repeat;
			background-size: 100% 100%;
		}
	}
	.pop{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0, 0, 0, 0.5);
	}
	.attr-pop{
	  position: fixed;
	  width: 100%;
	  height: 500rpx;
	  bottom: -500rpx;
	  transition: all 400ms ease;
	  box-sizing: border-box;
	  padding: 30rpx;
	  background: #fff;
	  .top{
	    display: flex;
	    margin-bottom: 35rpx;
	    position: relative;
	    .close{
	      position: absolute;
	      right: 0;
	      top: 0;
	      font-size: 30rpx;
	      color: #999;
	    }
	    .left{
	      float: left;
	      height: 177rpx;
	      width: 177rpx;
	      margin-right: 30rpx;
	      image{
	        float: left;
	        height: 177rpx;
	        width: 177rpx;
	      }
	    }
	    .right{
	      flex: 1;
	      display: flex;
	      align-items: flex-end;
	      view{
	        width: 100%;
	        line-height: 45rpx;
	      }
	      view:nth-child(1){
	        color: #b4282d;
	      }
	    }
	  }
	  .b{
	    .count{
	      width: 322rpx;
	      height: 71rpx;
	      line-height: 71rpx;
	      display: flex;
	      border: 1rpx solid #ccc;
	      margin-top: 20rpx;
	      view{
	        width: 90rpx;
	        text-align: center;
	      }
	      input{
	        flex: 1;
	        height: 100%;
	        text-align: center;
	        border-left: 1rpx solid #ccc;
	        border-right: 1rpx solid #ccc;
	      }
	    }
	  }
	}
	.fadeup{
		transform: translateY(-500rpx);
	}
	.attribute{
		padding: 20rpx 30rpx;
		background: #fff;
		margin-bottom: 20rpx;
		.head{
			font-size: 38rpx;
			padding: 20rpx 0;
		}
		.item{
			display: flex;
			background: #f7f7f7;
			padding: 20rpx 0;
			margin: 20rpx;
			view:nth-child(1){
				width: 134rpx;
				font-size: 25rpx;
				color: #999;
			}
			view:nth-child(2){
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.common-problem{
		margin-bottom: 110rpx;
		.h{
			padding: 35rpx 0;
			background: #fff;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			.title{
				padding: 0 25rpx;
				background: #fff;
			}
		}
		.b{
			padding: 0 30rpx;
			background: #fff;
			.item{
				padding-bottom: 25rpx;
				.question-box{
					display: flex;
					.spot{
						width: 8rpx;
						height: 8rpx;
						background: #b4282d;
						border-radius: 50%;
						margin-top: 11rpx;
					}
					.question{
						line-height: 30rpx;
						padding-left: 8rpx;
						display: block;
						font-size: 26rpx;
						padding-bottom: 15rpx;
						color: #303030;
					}
				}
				.answer{
					line-height: 40rpx;
					padding-left: 16rpx;
					font-size: 26rpx;
					color: #787878;
				}
			}
		}
		.sublist{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 730rpx;
			margin: 0 auto;
			background-color: #eee;
			view{
				width: 360rpx;
				background: #fff;
				margin-bottom: 10rpx;
				padding-bottom: 10rpx;
				image{
					display: block;
					width: 302rpx;
					height: 302rpx;
					margin: 0 auto;
				}
				view{
					margin-bottom: 5rpx;
					text-indent: lem;
				}
				view:nth-child(2){
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 98%;
				}
				view:nth-child(3){
					color: #9c3232;
				}
			}
		}
	}
	.bottom-fixed{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		z-index: 99;
		display: flex;
		.collect-box{
			height: 100rpx;
			width: 162rpx;
			border: 1rpx solid #f4f4f4;
			display: flex;
			align-items: center;
			justify-content: center;
			.collect{
				display: block;
				height: 44rpx;
				width: 44rpx;
				background: url('../../static/images/icon_collect.png') no-repeat;
				background-size: 100% 100%;
			}
			.collect.active{
				display: block;
				height: 44rpx;
				width: 44rpx;
				background: url('../../static/images/icon_collect_checked.png') no-repeat;
				background-size: 100% 100%;
			}
		}
		.car-box{
			height: 100rpx;
			width: 162rpx;
			border: 1rpx solid #f4f4f4;
			display: flex;
			align-items: center;
			justify-content: center;
			.car{
				position: relative;
				width: 60rpx;
				height: 60rpx;
				.icon{
					position: absolute;
					text-align: center;
					top: 0;
					right: 0;
					width: 28rpx;
					height: 28rpx;
					z-index: 10;
					background: #b4282d;
					font-size: 18rpx;
					color: #fff;
					line-height: 28rpx;
					border-radius: 50%;
				}
				image{
					display: block;
					height: 44rpx;
					width: 44rpx;
					position: absolute;
					top: 10rpx;
				}
			}
		}
		view:nth-child(3){
			height: 100rpx;
			line-height: 96rpx;
			flex: 1;
			text-align: center;
			color: #333;
			border-top: 1prx solid #f4f4f4;
			border-bottom: 1rpx solid #f4f4f4;
		}
		view:nth-child(4){
			height: 100rpx;
			line-height: 96rpx;
			flex: 1;
			text-align: center;
			color: #fff;
			background-color: #b4282d;
			border: 1rpx solid #b4282b;
			float: left;
		}
	}
}
</style>
